<template>
    <div>
        <div class='header'>
            <div class="left">
                <div class='iconfont back'>&#xe624;</div>
            </div>
            <div class="header-input">
              <span class="iconfont">&#xe632;</span>
              输入城市/景点/游玩主题
            </div>

            <div class="right">{{ this.$store.state.city }}
                <span @click="arrive" class='iconfont arrow'>&#xe8f2;</span>
            </div>
        </div>
    </div>
</template>


<script>
    export default{
        methods: {
            arrive(){
                this.$router.push({name:'city'})
            }
        }
    }
</script>


<style lang='scss' scoped>
.header{
    width: 100%;
    background-color: #16BFC7;
    height: 0.86rem;
    display: flex;
    line-height: .86rem;
    .left{ 
        width: .64rem;
      float: left;
      .back{
        text-align: center;
        font-size: .4rem;
        color: #fff;
      }
    }
    .header-input{
        flex: 1;
      height: .64rem;
      line-height: .64rem;
      margin-top: .12rem;
      margin-left: .2rem;
      padding-left: .2rem;
      background: #fff;
      border-radius: .1rem;
      color: #ccc;
    }
    .right{
         min-width: 1.04rem;
      padding: 0 .1rem;
      float: right;
      text-align: center;
      color: #fff;
      .arrow{
            
        font-size: .24rem;
        color: black;
      }
    }
}
</style>

